<template>
    <div class="tab">
        <!-- useTransition关闭默认滚动动画 -->
        <cube-tab-bar 
            :useTransition=false
            v-model="selectedLabel" 
            :show-slider=true
            :data="tabs"
            ref="tarbar"
            class="border-bottom-1px">
        </cube-tab-bar>
        <div class="slide-warpper">
            <cube-slide
              :loop=false
              :auto-play=false
              :show-dots=false
              :initial-index="index"
              ref="slide"
              @change="onChange"
              @scroll="onScroll"
              :options="slideOptions"
            >
            <!-- <cube-slide-item>
                <Goods></Goods>
            </cube-slide-item>
            <cube-slide-item>
                <Ratings></Ratings>
            </cube-slide-item>
            <cube-slide-item>
                <Seller></Seller>
            </cube-slide-item> --> 
            <cube-slide-item v-for="(tab,index) in tabs" :key=index>
                <!-- :is这里用来动态切换组件实现循环渲染(is另一个功能用来解除元素限制) -->
                <!-- :data="tab.data" 子组件传参 -->
                <components :is="tab.component" :data="tab.data" ref="component"></components>
            </cube-slide-item>
            </cube-slide>
        </div>
    </div>
</template>
<script>
    export default{
        name:"tab",
        props:{
            tabs:{
                //监测数据类型,设定默认值
                type:Array,
                defaule(){
                    return []
                }
            }
        },
        data() {
          return {
            index:0,
            //directionLockThreshold锁定滑动方向当我们需要锁定只滚动一个方向的时候，我们在初始滚动的时候根据横轴和纵轴滚动的绝对值做差，当差值大于 directionLockThreshold 的时候来决定滚动锁定的方向。
            //listenScroll监听滚动事件
            //当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发scroll 事件；当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。如果没有设置该值，其默认值为 0，即不派发 scroll 事件。
            slideOptions:{
                listenScroll: true,
                probeType: 3 ,
                directionLockThreshold: 0 
            }
          }
        },
        computed:{
            //这里也可以用tab的点击事件click来写
            selectedLabel:{
                //单独返回时通常会省略的默认方法
                get(){
                    return this.tabs[this.index].label
                },
                //如果对计算属性设置值，就会调用计算属性的set方法
                set(newVal){
                    this.index=this.tabs.findIndex((val)=>{
                        return val.label===newVal
                    })
                }
            }
        },
        mounted () {
          this.onChange(this.index)
        },
        methods:{
            onChange(val){
                //val是默认参数，改变后页面的索引值
                this.index=val
                const component = this.$refs.component[val]
                //存在方法才调用方法
                component.fetch && component.fetch()
            },
            onScroll(pos){
                //获取tabbar的宽度
                const tabBarWidth = this.$refs.tarbar.$el.clientWidth
                //获取滚动部分的整体宽度
                const slideWidth = this.$refs.slide.slide.scrollerWidth
                //根据比例计算下划线滚动位置
                const transform = -pos.x / slideWidth * tabBarWidth
                //setSliderTransform改变 cube-tab-bar 组件的下划线的 transformX，如果传 Number，会转成像素，也可以传带有单位的 String
                this.$refs.tarbar.setSliderTransform(transform)
            }
        },

    }
</script>
<style lang="stylus" scoped>
@import "common/stylus/mixin";
 /* scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，可以使用 >>> 操作符 */
.tab
  >>> .cube-tab
    padding :10px 0  
  display :flex
  flex-direction :column
  height :100%
  .slide-warpper
    flex:1
    overflow :hidden
</style>